<template>
  <div class="report-management-container">
    <vab-list-notice :content-array="contentArray" />
    <div class="page-search">
      <vab-query-form>
        <vab-query-form-left-panel :span="12">
          <el-form inline :model="queryForm" @submit.prevent>
            <el-form-item>
              <el-select v-model="queryForm.status" placeholder="审核状态">
                <el-option label="全部" :value="0" />
                <el-option label="待审核" :value="1" />
                <el-option label="已通过" :value="2" />
                <el-option label="未通过" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="queryData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
      </vab-query-form>
    </div>

    <el-table v-loading="listLoading" :data="list">
      <el-table-column align="center" label="序号" prop="id" width="55" />
      <el-table-column align="center" label="举报者信息" show-overflow-tooltip>
        <template #default="{ row }">
          <div class="list-item">
            <img class="list-item-avatar" alt="" :src="row.base.avatar" />
            <div class="list-item-meta">
              <div class="list-item-meta-name">
                {{ row.base.username }} | {{ row.base.realname }}
              </div>
              <div class="list-item-meta-age">
                <div>编号:{{ row.base.sn }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="被举报者信息"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div class="list-item">
            <img class="list-item-avatar" alt="" :src="row.obase.avatar" />
            <div class="list-item-meta">
              <div class="list-item-meta-name">
                {{ row.obase.username }} | {{ row.obase.realname }}
              </div>
              <div class="list-item-meta-age">
                <div>编号:{{ row.obase.sn }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="举报原因"
        prop="reason_name"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="审核状态" width="150">
        <template #default="{ row }">
          <el-select
            v-model="row.status"
            :disabled="isDisabled(row.status)"
            placeholder="请选择"
            @change="updateStatus($event, row.id)"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="举报时间"
        prop="created_at"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="操作" width="80">
        <template #default="{ row }">
          <el-button text type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
  import VabListNotice from '@/plugins/VabListNotice'
  import { doDelete, getList, doStatus } from '@/api/report'
  import { Delete, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'ReportManagement',
    components: {
      VabListNotice,
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          pageSize: 10,
          username: '',
        },
        contentArray: [
          '本页中记录了平台会员对某个会员进行的投诉举报记录，平台管理员或红娘可根据举报原因联系被举报的会员进行沟通;',
        ],
        statusArr: [
          {
            label: '待审核',
            value: 0,
          },
          {
            label: '已通过',
            value: 1,
          },
          {
            label: '未通过',
            value: 2,
          },
        ],
      })

      const isDisabled = (bind) => {
        if (bind === 0) {
          return false
        } else {
          return true
        }
      }

      //更新状态
      const updateStatus = async (event, id) => {
        try {
          const { msg } = await doStatus({
            id: id,
            status: event,
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        } catch (e) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }

      const handleDelete = (row) => {
        $baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDelete({ id: row.id })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        })
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.page = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        isDisabled,
        updateStatus,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Search,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .page-search {
    .el-select {
      width: 212px;
    }

    .el-input {
      width: 212px;
      border-left: 1px solid #e2ecfa;
      border-radius: 30px;
    }
  }
  .list-item {
    display: flex;

    &-avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    &-meta {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      margin-left: 10px;

      &-name {
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;

        &-sexicon {
          width: 16px;
          height: 16px;
          margin-left: 3px;
        }
      }

      &-age {
        display: flex;
        font-size: 12px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-time {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        div:nth-child(n + 1) {
          margin-right: 10px;
        }
      }

      &-btn {
        display: flex;
        font-size: 14px;
        color: rgb(0 0 0 / 45%);
        margin-top: 5px;
      }
    }
    &-desc {
      &-content {
        font-size: 14px;

        > span {
          text-align: left;
        }
      }
    }
  }
</style>
